<template>
	<el-card>
		<!-- <el-form :inline="true">
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
			</el-form-item>
		</el-form> -->
		<el-table v-loading="state.dataListLoading" :data="List" border style="width: 100%">
			<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
			<el-table-column type="index" label="序号" header-align="center" align="center" width="70"></el-table-column>
			<el-table-column prop="name" label="应用名" header-align="center" align="center">
				<template #default="scope">
					<el-tag type="primary">
						{{ scope.row.name }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="state" label="当前异常消息通知开关状态" header-align="center" align="center">
				<template #default="scope">
					<el-switch @change="stateChange($event, scope.row)" v-model="scope.row.state" :active-value="'open'" :inactive-value="'close'"></el-switch>
				</template>
			</el-table-column>
		</el-table>
		<!-- <el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination> -->
	</el-card>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { onMounted, reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { useLogListApi, useLogSwitchApi } from '@/api/data-service/log'
import { ElMessage, ElMessageBox } from 'element-plus/es'

const state: IHooksOptions = reactive({
	dataListUrl: '/data-service/app/dingding/switch',
	queryForm: {},
	dataListLoading: false
})

const List: any = ref([])

onMounted(() => {
	List.value = []
	getDataList()
})

const getDataList = () => {
	state.dataListLoading = true
	List.value = []
	useLogListApi()
		.then(res => {
			state.dataListLoading = false
			const keysData = Object.keys(res.data)
			keysData.map(item => {
				List.value.push({
					name: item,
					state: res.data[item]
				})
			})
		})
		.catch(() => {
			state.dataListLoading = false
		})
}

const stateChange = (value, data) => {
	console.log(data)
	ElMessageBox.confirm(`${data.name}的异常消息通知状态是否${value == 'open' ? '开启' : '关闭'}?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			useLogSwitchApi({ serviceName: data.name, status: value })
				.then(res => {
					ElMessage.success(`${value == 'open' ? '开启' : '关闭'}成功`)
					getDataList()
				})
				.catch(() => {
					data.state = value == 'open' ? 'close' : 'open'
				})
		})
		.catch(() => {
			data.state = value == 'open' ? 'close' : 'open'
		})
}

// const { selectionChangeHandle, sizeChangeHandle, currentChangeHandle } = useCrud(state)
</script>
